<template>
  <div class="allpay">
    <!-- 头部tab -->
    <div class="header-wrap">
      <span class="header-wrap-left" @click="goback">
        <i class="iconback iconfont icon-fanhui"></i>
      </span>
      <span class="header-wrap-text">车辆费用</span>
      <span class="header-wrap-right newsbox">
        <!-- <i class="iconseach iconfont icon-tongzhi"></i>
        <span class="news"></span> -->
      </span>
    </div>
    <!-- tabs -->
    <van-tabs
      v-model="activeName"
      animated
      :swipeable='true'
      :border='false'
      title-inactive-color="#57c5c6"
      title-active-color="#FD5585"
      background='#fff'
      line-width='50%'
      line-height='0.02rem'
      @change=onChange(activeName)
    >
      <van-tab
        v-model="activeName"
        v-for="(list,index) in listData"
        :key="index"
        :title="list.name"
        :name="list.id"
      >
        <div style="min-height:calc(100vh - 1rem);">
          <!-- 待缴费列表 -->
          <div v-if="index==0">
            <div>
              <Pending v-for="(item,index) in pendingData" :key="index" :message='item'/>
            </div>
          </div>
          <!-- 已缴费列表 -->
          <div v-if="index==1">
            <Paymented v-for="(item,index) in itemData" :key="index" :message='item'/>
          </div>
        </div>
      </van-tab>
    </van-tabs>
    <Tips v-if="show&&activeName==1"/>
  </div>
</template>
<script>
import api from '../../api/api.js'
import {Tab, Tabs} from 'vant';
import Pending from './components/pending'
import Paymented from './components/paymented'
import Tips from '../../components/tips'

export default {
  data() {
    return {
      ids: [],
      pendingData: [],
      show: false,
      length: null,
      activeName: '',
      modular_selfpay: '',
      listData: [
        {
          id: '0',
          name: '待缴纳',
        },
        {
          id: '1',
          name: '已缴纳',
        }

      ],
      itemData: []
    }
  },
  created() {
    this.getMineTrip()
    this.menu()
    this.quarters()
  },
  methods: {
    menu() {
      window.scrollTo(0, 0)
    },
    goback() {
      this.$router.go(-1)
      // window.location.href = 'https://mall.nengyoukeji.com/app/index.php?i=23&c=entry&m=ewei_shopv2&do=mobile&wxref=mp.weixin.qq.com#wechat_redirect'
    },
    // 执行缴费列表
    getMineTrip() {
      this.pending()
    },

    // 获取已缴费列表
    Paymented() {
      this.$get(api.parkingPending, {
        params: {
          pay_status: 1
        }
      })
        .then(response => {
          if (response.data.code === 1) {
            this.itemData = response.data.data.list
            this.length = response.data.data.list.length
            if (this.length <= 0) {
              this.show = true
            } else {
              this.show = false
            }
          }
        })
        .catch((error) => {
          console.log(error);
        })
    },
    // 获取待缴费列表
    pending() {
      this.$get(api.parkingPending, {
        params: {
          pay_status: 0
        }
      })
        .then(response => {
          if (response.data.code === 1) {
            this.pendingData = response.data.data.list
          }
        })
        .catch((error) => {
          console.log(error);
        })
    },
    // 缴费列表
    onChange(id) {
      console.log('id', id)
      if (id == 0) {
        this.pending()
      }
      if (id == 1) {
        this.Paymented()
      }
    },
    quarters() {
      this.$get(api.quarters, {})
        .then((response) => {
          if (response.data.code == 1) {
            this.modular_selfpay = response.data.data.modular_selfpay
            console.log('modular_selfpay', this.modular_selfpay)
          }
        })
        .catch((error) => {
          console.log(error);
        });
    },
    //  keypayment(change){
    //   const back_url=encodeURIComponent(encodeURIComponent(window.location.href));
    //   change.forEach((element,index) => {
    //     this.ids.push(element.id)
    //     console.log('ids',this.ids)
    //   });
    //   this.$get(api.keypayment, {
    //     params: {
    //       ids: this.ids,
    //       back_url:back_url,
    //       from_type:'Money'
    //     }
    //   })
    //   .then(response => {
    //     if (response.data.code == 1) {
    //       console.log(1111);
    //     }
    //   })
    //   .catch((error) => {
    //     console.log(error);
    //   })
    //   },
    // 一键缴费
    // keypayment(change) {
    //   change.forEach((element, index) => {
    //     this.ids.push(element.id)
    //   });
    //   const back_url = encodeURIComponent(encodeURIComponent(window.location.href));
    //   console.log(back_url)
    //   window.location.href = api.keypayment + '?ids=' + this.ids.join(',') + '&from_type=Money' + '&back_url=' + back_url;
    // },
    //
    // toselfpay() {
    //   this.$router.push('/userPay')
    // },

  },
  components: {
    [Tab.name]: Tab,
    [Tabs.name]: Tabs,
    Pending,
    Paymented,
    Tips
  }
}
</script>
<style>
.allpay .van-tabs__wrap {
  z-index: 1000;
  width: 100%;
  /* border-bottom: 1px solid #423B6F; */
  position: fixed;
  top: 1rem;
  left: 0;
}

.allpay .van-tab, .van-tab--active {
  font-weight: bold;
}

.allpay .van-tabs--line {
  padding-top: 2rem;
}
</style>
<style scoped>
.allpay-list {
  display: flex;
  height: 2.5rem;
  background: #fff;
  margin: .25rem .3rem;
  border-radius: .2rem;
}

.img-box {
  flex: 1.5;
}

.img-content {
  position: relative;
  margin: .38rem auto 0;
  width: 1.2rem;
  height: 1.2rem;
  border-radius: 50%;
  background: #0EAD69;
}

.img-content img {
  position: absolute;
  left: calc(50% - .21rem);
  top: calc(50% - .22rem);
  width: .42rem;
  height: .44rem;
}

.pay-content {
  padding-top: .45rem;
  flex: 3;
}

.pay-content span {
  display: block;
}

.pay-content span:nth-of-type(1) {
  font-weight: bold;
  font-size: .32rem;
  color: #000;
}

.pay-content span:nth-of-type(2) {
  color: #57c5c6;
  margin-top: .1rem;
}

.newsbox {
  position: relative;
}

.news {
  display: block;
  position: absolute;
  right: 22%;
  top: 18.5%;
  width: .15rem;
  height: .15rem;
  text-align: center;
  border-radius: 50%;
  background: #FF001f;
}

.submit {
  display: block;
  margin: .5rem auto 0;
  color: #fff;
  height: 1rem;
  line-height: 1rem;
  border-radius: .5rem;
  width: 88%;
  background-image: -webkit-gradient(linear, left top, right top, from(#ffc796), to(#fd5585));
  background-image: linear-gradient(90deg, #ffc796, #fd5585);
  border-radius: .45rem;
  text-align: center;
  font-weight: 700;
}
</style>
